import React, { useState, useEffect } from 'react';
import Header from '../../../compoennts/studentAbsent/Header';
import AbsentTable from '../../../compoennts/studentAbsent/AbsentTable';
import AbsentDrawer from '../../../compoennts/studentAbsent/AbsentDrawer';
import { Cascader, Button } from 'antd';
import { FileAddOutlined } from '@ant-design/icons';
import service from '../../../services';
import exportExcel from '../../../utils/exportExcel';

function AbsentRecord(props) {
    const [data, setData] = useState([]);
    const [open, setOpen] = useState(false);
    const [Rowdata, setRowdata] = useState({});

    // 点击查看触发，打开抽屉，查看请假申请
    const openDrawer = (data) => {
        setRowdata(data)
        // console.log(data, Rowdata)
        setOpen(true)
    }
    const onClose = () => {
        setOpen(false)
    }

    const columns = [
        {
            title: '序号',
            width: 70,
            dataIndex: 'id',
            key: 'id',
            align: 'center'
        },
        {
            title: '请假学生',
            width: 130,
            dataIndex: 'name',
            key: 'name',
            align: 'center'
        },
        {
            title: '年级班级',
            width: 130,
            dataIndex: 'className',
            key: 'className',
            align: 'center'
        },
        {
            title: '请假类型',
            width: 130,
            dataIndex: 'type',
            key: 'type',
            align: 'center'
        },
        {
            title: '请假时间',
            width: 170,
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            render: (text) => { return new Date(text).toLocaleString() }
        },
        {
            title: '请假事由',
            width: 280,
            dataIndex: 'reason',
            key: 'reason',
            align: 'center',
            ellipsis: {
                showTitle: false,
            },
            render: (text) => text
        },
        {
            title: '发起人',
            width: 160,
            dataIndex: 'Publisher',
            key: 'Publisher',
            align: 'center'
        },
        {
            title: '发起时间',
            width: 175,
            dataIndex: 'time',
            key: 'time',
            align: 'center'
        },
        {
            title: '请假状态',
            width: 150,
            dataIndex: 'state',
            key: 'state',
            align: 'center',
            render: (text) => {
                if (text == 0) {
                    return <span style={{ color: 'orange' }}>待审核</span>
                } else {
                    return <span style={{ color: 'rgb(0,198,149)' }}>已通过</span>
                }
            }
        },
        {
            title: '操作',
            width: 160,
            dataIndex: 'operation',
            key: 'operation',
            align: 'center',
            render: (_, record) => {
                return <a className='link_blue' onClick={() => { openDrawer(record) }}>查看</a>
            }
        }

    ];
    const fields = ['序号', '请假学生', '年级班级', '请假类型', '请假时间', '请假事由', '发起人','请假状态','发起时间',]

    useEffect(() => {
        //获取请假学生列表的函数
        const getAbsentList = async () => {
            let result = await service.AbsentService.getAllAbsent()
            // console.log(result.data)
            setData(result.data)
        }
        getAbsentList()
    }, [JSON.stringify(data)])

    return (
        <div>
            <Header>
                <div>
                    请假状态：<Cascader placeholder="请选择" />
                </div>
                <div>
                    年级/班级：<Cascader placeholder="请选择" />
                </div>
            </Header>
            <AbsentTable columns={columns} data={data} rowKey={record => record.id}>
                <Button type='primary' onClick={() => { exportExcel(fields, data,'请假记录表') }}><FileAddOutlined />导出</Button>
            </AbsentTable>

            {/* 抽屉-查看请假 */}
            < AbsentDrawer open={open} onClose={onClose} data={Rowdata} />
        </div >
    );
}

export default AbsentRecord;